import React, { useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom';
import { Toast, NavBar } from 'react-vant';
import axios from '../../utils/index'
import { PullRefresh, List, Tabs, Cell } from 'react-vant'
import style from './index.module.css'
const Index: React.FC = () => {
    const navigate = useNavigate()
    const [tabList, setTabList] = useState([]);
    const [tabIndex, setTabIndex] = useState(0);
    const aaa = async () => {
        const res = await axios.get('/api/neitab')
        if (res.data.code == 200) {
            setTabList(res.data.neitab)
        }
    }
    useEffect(() => {
        aaa()
    }, [])

        const onLoad = async () => {
        const res = await axios.get('/api/neitab')
        setTimeout(() => {
            if (res.data.code === 200) {
                setTabList([...tabList, ...res.data.neitab])
                console.log(res.data.neitab);
            }
        }, 1000)
    }
    return (
        <div>
            <NavBar
                title="内科"
                onClickLeft={() => navigate(-1)}
            />
            <img src="../src/assets/110.png" alt="" style={{ width: '100%' }} />
            <p className={style.pp}>--主任医生推荐--</p>
            <div className="zysbutton-button">
                {tabList.length > 0 &&
                    tabList[tabIndex].children.map((item, index) => (
                        <div key={index}>
                            <div>
                                <dl>
                                    <dt>
                                        <img src={item.img} />
                                    </dt>
                                    <dd>
                                        <dd><b>{item.name}</b> {item.zhu}</dd>
                                        <dd>
                                            <span style={{ fontSize: '14px', color: '#000' }}>{item.yuan}</span>
                                        </dd>
                                        <dd>擅长:{item.shen}</dd>
                                        <dd>
                                            咨询： <span style={{ color: 'orange', fontSize: '14px' }}>{item.zi}人</span> 评分: <span style={{ color: 'orange', fontSize: '14px' }}>{item.ping}分</span>
                                            <button className={style.btn}>立即咨询</button>
                                        </dd>
                                    </dd>
                                </dl>
                            </div>
                        </div>
                    ))}
            </div>

            <p className={style.pp}>--最佳服务医生推荐--</p>
            <List onLoad={onLoad} >
                <div className={style.box}>
                    <div className={style.box1}>
                        {tabList.length > 0 &&
                            tabList[tabIndex].children.map((item, index) => (
                                <div key={index}>
                                    <div>
                                        <dl>
                                            <dt>
                                                <img src={item.img} style={{ width: '100px', height: '100px', borderRadius: '50%' }} />
                                                <b>{item.name}</b> {item.zhu}
                                            </dt>
                                            <dd>
                                                <dd>
                                                    <span style={{ fontSize: '14px', color: '#000' }}>{item.yuan}</span>
                                                </dd>
                                                <dd>擅长:{item.shen}</dd>
                                                <dd>
                                                    咨询： <span style={{ color: 'orange', fontSize: '14px' }}>{item.zi}人</span> 评分: <span style={{ color: 'orange', fontSize: '14px' }}>{item.ping}分</span>
                                                    <button className={style.btn1}>立即咨询</button>
                                                </dd>
                                            </dd>
                                        </dl>
                                    </div>
                                </div>
                            ))}
                    </div>
                </div>
            </List>
        </div>
    )
}

export default Index
